<template>
  <div class="app-container">
    <el-button class="margin-bottom" type="primary" size="small" @click="dialog.createRole.visible = true">新建</el-button>
    <el-table
      :data="roles"
      size="mini"
      border
      stripe
      highlight-current-row
    >
      <el-table-column type="index" width="55" />
      <el-table-column
        prop="toolRole.rolename"
        label="角色名称"
        sortable
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.toolRole.rolename)">详情</el-button>
          <span v-show="scope.row.toolRole.rolename !== 'admin'" class="margin-left">
            <el-button type="text" size="small" @click="delRole(scope.row.toolRole.rolename)"><span class="text-danger">删除</span></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建角色 -->
    <el-dialog :visible.sync="dialog.createRole.visible" width="50%" title="新建角色">
      <el-form size="mini" :model="dialog.createRole.role">
        <el-button class="margin-bottom" type="primary" size="small" @click="createRole">确定</el-button>
        <el-form-item>
          <el-input v-model="dialog.createRole.role.toolRole.rolename" placeholder="请输入角色名称" size="small" />
        </el-form-item>
        <el-form-item>
          <el-row style="">
            <el-col :span="11">
              <div style="height: 300px;overflow-y: scroll">
                <el-tree ref="groupTree" :data="dialog.accessGroups" :check-strictly="true" node-key="path" :default-expanded-keys="['/']" :props="{label: 'path'}" show-checkbox />
              </div>
            </el-col>
            <el-col :span="11" class="margin-left">
              <div style="height: 300px;overflow-y: scroll">
                <el-tree ref="resourceTree" :data="dialog.accessResources" :check-strictly="true" node-key="id" show-checkbox />
              </div>
            </el-col>
          </el-row>

        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import security from '@/api/security'

export default {
  name: 'role',
  data() {
    return {
      roles: [],
      dialog: {
        accessResources: [],
        accessGroups: [],
        createRole: {
          visible: false,
          role: {
            toolRole: {
              rolename: null
            },
            groups: [],
            resources: []
          }
        }
      }

    }
  },
  created() {
    this.loadRoles()

    // 加载登录用户可授权的分组
    security.accessGroups().then(res => {
      this.dialog.accessGroups = [res.data]
    })

    // 加载登录用户可授权的资源
    security.accessResources().then(res => {
      this.dialog.accessResources = res.data
    })
  },
  methods: {
    loadRoles() {
      security.accessRoles().then(res => {
        this.roles = res.data
      })
    },
    delRole(rolename) {
      security.delRole(rolename).then(res => {
        this.loadRoles()
      })
    },
    createRole() {
      // 获取选择的组织列表
      this.dialog.createRole.role.groups = this.$refs.groupTree.getCheckedKeys()
      this.dialog.createRole.role.resources = this.$refs.resourceTree.getCheckedKeys()
      security.addRole(this.dialog.createRole.role).then(res => {
        this.dialog.createRole.visible = false
        this.loadRoles()
      })
    },
    detail(rolename) {
      this.$router.replace({ path: '/security/role/detail', query: { rolename }})
    }
  }
}
</script>


